<style>

  .select2-container--default.select2-container--focus .select2-selection--multiple {
    border: solid #FFF 0px;
    border-bottom: 2px solid #eee;
    outline: 0;
  }

  .select2-container--default .select2-selection--multiple {
    margin-top: 5px;
    background-color: white;
    border-radius: 4px;
    border: solid #FFF 0px;
    border-bottom: 2px solid #eee;
    cursor: text;
  }

  .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #FFFFFF;
    border: 2px solid #eee;
    border-radius: 4px;
    cursor: default;
    float: left;
    margin-right: 5px;
    margin-top: 5px;
    padding: 0 5px;
  }
</style>
<div id="createDialog" class="crudDialog">
  <form id="createForm" method="post">
    <div id="add" class="form-group">
      <label for="loginName" class="active">帐号</label>
      <select id="loginName" name="userId" class="select2 J_select2_user" multiple="multiple" data-placeholder="选择角色"
              style="width: 100%;">
      </select>
    </div>
    <div id="update" class="form-group">
      <label for="cusId" class="active">帐号</label>
      <input id="cusId" type="text" disabled class="form-control" name="cusId" maxlength="20"/>
    </div>
    <div class="form-group">
      <label for="name" >商户名称</label>
      <input id="name" type="text" class="form-control" name="name" maxlength="20"/>
    </div>
    <div class="form-group">
      <label for="appId">应用Id</label>
      <input id="appId" type="text" class="form-control" name="appId" maxlength="50"/>
    </div>
    <div class="form-group">
      <label for="appKey">应用Key</label>
      <input id="appKey" type="text" class="form-control" name="appKey" maxlength="50"/>
    </div>
    <div style="margin-bottom: 20px">
      <label style="color:#999">支付方式 </label>
      </br>
      <div class="checkbox checkbox-success ">
        <input type="checkbox" id="yeePay" name="payType" value="yeePay">
        <label for="yeePay"> 网银 </label>
      </div>
      <div class="checkbox checkbox-success ">
        <input type="checkbox" id="WeChat" name="payType" value="WeChat">
        <label for="WeChat"> 微信 </label>
      </div>
      <div class="checkbox checkbox-success ">
        <input type="checkbox" id="AliPay" name="payType" value="AliPay">
        <label for="AliPay"> 支付宝 </label>
      </div>
      <!--HDF-货到付款，wallet-钱包-->
      <div class="checkbox checkbox-success ">
        <input type="checkbox" id="HDF" name="payType" value="HDF">
        <label for="HDF"> 货到付款 </label>
      </div>
      <div class="checkbox checkbox-success ">
        <input type="checkbox" id="wallet" name="payType" value="wallet">
        <label for="wallet"> 钱包 </label>
      </div>
    </div>
    <div class="form-group">
      <label for="remark">备注</label>
      <input id="remark" type="text" class="form-control" name="remark">
    </div>
    <br/>
    <div class="form-group text-right dialog-buttons">
      <a class="waves-effect waves-button" href="javascript:;" onclick="createSubmit();">保存</a>
      <a class="waves-effect waves-button" href="javascript:;" onclick="createDialog.close();">取消</a>
    </div>

  </form>
</div>
<script>

  function getAccount(id, fc) {
    iGet('/sys/account/' + id, fc)
  }

  function getUser(fc) {
    iGet("/sys/user/roleType?roleType=account", fc);
  }

  var id = 0;


  //select2
  $(".J_select2_user").select2({
    multiple: false,
//    maximumSelectionSize: 1,
//    maximumSelectionLength: 10,
    language: "zh-CN"
  });

  //选中某个标签
  function selectTag(value) {
    $(".select2").val(value).trigger('change');
  }


  setTimeout(function () {
    if (location.href.indexOf('#') > 0) {
      id = location.href.split("#")[1];
    }
    //判断是否是更新操作
    if (id == 0) {
      $('#update').remove();
    } else {
      $('#add').remove();
    }
    //更新获取用户数据
    if (id != 0) {
      getAccount(id, function (data) {
        console.log(data);
        var user = data.content;
        //设置input 此处没有用vue vue与inputmask有兼容性问题
        for (var p in user) {
          if (p == 'payType') {
            try {
              user[p].split(",").forEach(function (type) {
                $("input:checkbox[value=" + type + "]").attr('checked', 'true');
              })
            } catch (e) {
              console.log("checkbox")
            }
          } else {
            $("input[name=" + p + "]").val(user[p]);
          }
        }
      });
    } else {
      getUser(function (data) {
        console.log("------", data);
        var users = []
        data.content.forEach(function (user) {
          users.push({text: user.loginName, id: user.id});
        })
        $(".select2").select2({
          data: users
        });
      })
    }
    //去掉有值的input标题效果
    var inputs = $("#createForm input[type=text]");
    for (var i = 0; i < inputs.length; i++) {
      if ($(inputs[i]).val() != '') {
        $(inputs[i]).parent().find('label').addClass('active');
      }
    }
    //Money Euro
    $("[data-mask]").inputmask();
  }, 300)


  function createSubmit() {
    var data = {};
    $('#createForm').serializeArray().map(function (x) {
      data[x.name] = x.value;
    });
    var beforeSend = function () {
      $("#createForm input[type=text]").each(function (ob, index) {
        console.info(ob);
        if ($(this).val() == '') {
          $(this).focus();
          return false;
        }
      });
    };
    if (id == 0){
      var userId = $(".J_select2_user").val();
      var cusId = $(".J_select2_user option[value="+userId+"]").text();;
      userId = parseInt(userId);
      data.userId = userId;
      data.cusId = cusId;
    }else {
      delete data[userId];
      delete data[cusId]
    }
    data.payType = $('input[name="payType"]:checked').map(function(){return this.value}).get().join(',');
    console.info(data);
    var success = function (result) {
      if (result.status != 'SUCCESS') {
        $.confirm({
          theme: result.status == 'SUCCESS' ? 'light' : 'dark',
          animation: 'rotateX',
          closeAnimation: 'rotateX',
          title: false,
          content: result.msg.indexOf('constraint') > 0 ? '请尝试换一个新的用户名' : result.msg,
          buttons: {
            confirm: {
              text: '确认',
              btnClass: 'waves-effect waves-button waves-light',
            }
          }
        });
      } else {
        createDialog.close();
        $table.bootstrapTable('refresh');
      }
    }
    var error = function (jqXHR, textStatus) {
      $.confirm({
        theme: 'dark',
        animation: 'rotateX',
        closeAnimation: 'rotateX',
        title: false,
        content: textStatus != 'canceled' ? '系统异常' : '请检查密码与用户名',
        buttons: {
          confirm: {
            text: '确认',
            btnClass: 'waves-effect waves-button waves-light'
          }
        }
      });
    }
    if (id == 0) {
      iPost('/sys/account', data, beforeSend, success, error);
    } else {
      iPut('/sys/account/' + id, data, beforeSend, success, error);
    }

  }
</script>